<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Spin 加载中</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons_antd.js"></script>
</head>
<style>
.ant-spin{
	margin-left: 20px;
}
.example-con {
	text-align: center;
	background: rgba(0, 0, 0, 0.05);
	border-radius: 4px;
	margin-bottom: 20px;
	padding: 30px 50px;
	margin: 20px 0;
}
.spin-state {
	margin-top: 16px;
}
</style>
<body>

<div id="app">
	<a-divider class="a-divi" orientation="left">基本用法</a-divider><!-- =============================================================== -->
	<p class="desc">一个简单的 loading 状态。</p>
	<a-spin></a-spin>
	
	<a-divider class="a-divi" orientation="left">容器</a-divider><!-- =============================================================== -->
	<p class="desc">放入一个容器中。</p>
	<div class="example-con">
		<a-spin></a-spin>
	</div>
	
	<a-divider class="a-divi" orientation="left">自定义描述文案</a-divider><!-- =============================================================== -->
	<p class="desc">自定义描述文案。</p>
	<a-spin tip="Loading..." style="margin-left: 0px;">
		<a-alert message="Alert message title" description="Further details about the context of this alert."></a-alert>
	</a-spin>
	
	<a-divider class="a-divi" orientation="left">自定义指示符</a-divider><!-- =============================================================== -->
	<p class="desc">使用自定义指示符。（不知道为什么，没有转起来）</p>
	<a-spin :indicator="indicator"></a-spin>
	<a-spin>
		<template #indicator>
			<loading-outlined></loading-outlined>
		</template>
	</a-spin>
	
	<a-divider class="a-divi" orientation="left">各种大小</a-divider><!-- =============================================================== -->
	<p class="desc">小的用于文本加载，默认用于卡片容器级加载，大的用于页面级加载。</p>
	<a-space>
		<a-spin size="small"></a-spin>
		<a-spin></a-spin>
		<a-spin size="large"></a-spin>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">卡片加载中</a-divider><!-- =============================================================== -->
	<p class="desc">可以直接把内容内嵌到 Spin 中，将现有容器变为加载状态。</p>
	<a-spin :spinning="spinning6" style="margin-left: 0px;">
		<a-alert message="Alert message title" description="Further details about the context of this alert."></a-alert>
	</a-spin>
	<div class="spin-state">
		Loading state：
		<a-switch v-model:checked="spinning6"></a-switch>
	</div>
	
	<a-divider class="a-divi" orientation="left">延迟</a-divider><!-- =============================================================== -->
	<p class="desc">延迟显示 loading 效果。当 spinning 状态在 delay 时间内结束，则不显示 loading 状态。</p>
	<a-spin :spinning="spinning7" :delay="delayTime7" style="margin-left: 0px;">
		<a-alert message="Alert message title" description="Further details about the context of this alert."></a-alert>
	</a-spin>
	<div class="spin-state">
		Loading state：
		<a-switch v-model:checked="spinning7"></a-switch>
	</div>
	
</div>
<div class="h100"></div>

</body>
<script>
const Main = {
data() {
	return {
		indicator: Vue.h(AntdIconsVue.LoadingOutlined, {
			style: {
				fontSize: '24px',
			},
			spin: true,
		}),
		spinning6: false,
		spinning7: false,
		delayTime7: 500,
	}
},
methods:{
	fn(){
		this.message = "欢迎来到HTML中文网。";
	},
	hello(par){
		this.message = "参数值为：" + par;
	},
	
	
},
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(AntdIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
